<template>
    <view class="bg-content">
        <view class="qiun-columns">
            <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
                <view class="qiun-title-dot-light">基本折线图</view>
            </view>
            <view class="qiun-charts">
                <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
            </view>
        </view>
    </view>
</template>

<script>

    import uCharts from '@/components/u-charts/u-charts.min.js';

    var _self;
    var canvaLineA = null;

    export default {
        data() {
            return {}
        },
        onReady() {
            _self = this;
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(500);
            this.getServerData();
        },
        methods: {
            getServerData() {
                let result = {
                    "success": true,
                    "data": {
                        "LineA": {
                            "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
                            "series": [{
                                "name": "成交量A",
                                "data": [35, 8, 25, 37, 4, 20]
                            }, {
                                "name": "成交量B",
                                "data": [70, 40, 65, 100, 44, 68]
                            }, {
                                "name": "成交量C",
                                "data": [100, 80, 95, 150, 112, 132]
                            }]
                        },
                    }
                };

                let LineA = {categories: [], series: []};
                //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
                LineA.categories = result.data.LineA.categories;
                LineA.series = result.data.LineA.series;
                _self.showLineA("canvasLineA", LineA);
            },
            showLineA(canvasId, chartData) {
                canvaLineA = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    type: 'line',
                    fontSize: 11,
                    legend: {show: true},
                    dataLabel: false,
                    dataPointShape: true,
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    xAxis: {
                        type: 'grid',
                        gridColor: '#CCCCCC',
                        gridType: 'dash',
                        dashLength: 8
                    },
                    yAxis: {
                        gridType: 'dash',
                        gridColor: '#CCCCCC',
                        dashLength: 8,
                        splitNumber: 5,
                        min: 10,
                        max: 180,
                        format: (val) => {
                            return val.toFixed(0) + '元'
                        }
                    },
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    extra: {
                        line: {
                            type: 'straight'
                        }
                    }
                });

            },
            touchLineA(e) {
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
